<!--  -->
<template>
  <div class="test">
    <div class="fullSize" id="cesiumContainer"></div>
    <div id="loadingOverlay">
      <h1>Loading...</h1>
    </div>
    <div id="toolbar"></div>
  </div>
</template>

<script>
import "cesium/Build/Cesium/Widgets/widgets.css";
import * as Cesium from "cesium";
import {Sandcastle} from 'cesium'
export default {
  data() {
    return {};
  },
  mounted(){
    this.load()
  },
  methods: {
    load() {
      var viewer = new Cesium.Viewer("cesiumContainer", {
        shouldAnimate: true,
      });

      var statusDisplay = document.createElement("div");
      var fuelDisplay = document.createElement("div");
      var czmlPath = "../SampleData/";
      var vehicleEntity;

      // Add a blank CzmlDataSource to hold our multi-part entity/entities.
      var dataSource = new Cesium.CzmlDataSource();
      viewer.dataSources.add(dataSource);

      // This demo shows how a single path can be broken up into several CZML streams.
      var partsToLoad = [
        {
          url: "MultipartVehicle_part1.czml",
          range: [0, 1500],
          requested: false,
          loaded: false,
        },
        {
          url: "MultipartVehicle_part2.czml",
          range: [1500, 3000],
          requested: false,
          loaded: false,
        },
        {
          url: "MultipartVehicle_part3.czml",
          range: [3000, 4500],
          requested: false,
          loaded: false,
        },
      ];

      function updateStatusDisplay() {
        var msg = "";
        partsToLoad.forEach(function (part) {
          msg += part.url + " - ";
          if (part.loaded) {
            msg += "Loaded.<br/>";
          } else if (part.requested) {
            msg += "Loading now...<br/>";
          } else {
            msg += "Not needed yet.<br/>";
          }
        });
        statusDisplay.innerHTML = msg;
      }

      // Helper function to mark a part as requested, and process it into the dataSource.
      function processPart(part) {
        part.requested = true;
        updateStatusDisplay();
        dataSource.process(czmlPath + part.url).then(function () {
          part.loaded = true;
          updateStatusDisplay();

          // Follow the vehicle with the camera.
          if (!viewer.trackedEntity) {
            viewer.trackedEntity = vehicleEntity = dataSource.entities.getById(
              "Vehicle"
            );
          }
        });
      }

      // Load the first part up front.
      processPart(partsToLoad[0]);

      // Load a new section before the clock naturally gets there.
      // Note this can't predict when a user may fast-forward to it.
      var preloadTimeInSeconds = 100;

      viewer.clock.onTick.addEventListener(function (clock) {
        // This example uses time offsets from the start to identify which parts need loading.
        var timeOffset = Cesium.JulianDate.secondsDifference(
          clock.currentTime,
          clock.startTime
        );

        // Filter the list of parts to just the ones that need loading right now.
        // Then, process each part that needs loading.
        partsToLoad
          .filter(function (part) {
            return (
              !part.requested &&
              timeOffset >= part.range[0] - preloadTimeInSeconds &&
              timeOffset <= part.range[1]
            );
          })
          .forEach(function (part) {
            processPart(part);
          });

        if (vehicleEntity) {
          var fuel = vehicleEntity.properties.fuel_remaining.getValue(
            clock.currentTime
          );
          if (Cesium.defined(fuel)) {
            fuelDisplay.textContent = "Fuel: " + fuel.toFixed(2) + " gal";
          }
        }
      });

      // Add a reset button, for convenience.
      Sandcastle.addToolbarButton("Reset demo", function () {
        // Put things back to the starting position.
        viewer.clock.currentTime = viewer.clock.startTime;
        viewer.clock.shouldAnimate = true;

        partsToLoad.forEach(function (part) {
          part.requested = false;
          part.loaded = false;
        });

        dataSource.entities.removeAll();
        processPart(partsToLoad[0]);
      });

      // Show the status display below the reset button.
      statusDisplay.style.background = "rgba(42, 42, 42, 0.7)";
      statusDisplay.style.padding = "5px 10px";
      document.getElementById("toolbar").appendChild(statusDisplay);

      // Show a multi-part custom property being read from CZML.
      fuelDisplay.style.background = "rgba(42, 42, 42, 0.7)";
      fuelDisplay.style.padding = "5px 10px";
      fuelDisplay.style.marginTop = "5px";
      document.getElementById("toolbar").appendChild(fuelDisplay);
    },
  },
};
</script>
<style scoped lang='scss'>
// @import url(../templates/bucket.css);
.test{
  width: 100%;
  height: 100%;
}
</style>